<template>
    <div>
      <el-tag closable type="primary" effect="dark"
        style="border-radius: 0px; padding: 12px 10px; cursor: pointer; margin: 3px 0 3px 20px;">
        <span style="background-color: white; border-radius: 50%; width: 8px; height: 8px; display: inline-block;"></span>
        <span style="padding-left: 5px;">咨询师表</span>
      </el-tag>
    </div>
    
    <!-- ============================= -->
    <hr>
    <el-form :inline="true" :data="queryInfo" :model="queryInfo" class="demo-form-inline">
            <el-form-item label="姓名">
            <el-input v-model="queryInfo.name" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="等级">
              <el-select v-model="queryInfo.levelId" placeholder="please select your zone" style="width: 300px;" clearable>
                <el-option label="国家一级咨询师" value="1" />
                <el-option label="国家二级咨询师" value="2" />
                <el-option label="国家三级咨询师" value="3" />
            </el-select>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="queryInfo.region" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
  
    <el-button type="primary" plain icon="Plus" style="padding: 0 15px; height: 28px; margin: 5px 0 0 20px;" @click="onAdd">
      <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">新增</span>
    </el-button>
  
    <el-button type="danger" plain icon="Delete" style="padding: 0 15px; height: 28px; margin: 5px 0 0 20px;" @click="onDeletes">
      <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">删除</span>
    </el-button>
  
    <el-table :data="tableData" style="width: 100%; padding-left: 20px;"
      @selection-change="handleSelectionChange">
  
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="id" label="编号" />
      <el-table-column prop="username" label="用户名"  >
        <template #default="scope">
          <el-text line-clamp="2">
            {{ scope.row.username  }}
          </el-text>
        </template>  
      </el-table-column>
      <el-table-column prop="password" label="密码"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="tel" label="电话"/>
      <el-table-column prop="gender" label="性别"/>
      <el-table-column prop="tx" label="头像">
        <template #default="scope">
            <el-image style="width: 100px; height: 100px" :src="url+scope.row.tx" :fit="fit" />
        </template>
      </el-table-column>
      <el-table-column prop="region" label="所属地址"/>
      <el-table-column prop="intro" label="介绍">
        <template #default="scope">
          <el-text line-clamp="2">
            {{ scope.row.intro }}
          </el-text>
        </template>
        </el-table-column>
        <el-table-column prop="levelId" label="咨询师等级">
          <template #default="scope">
        <span v-if="scope.row.levelId == 1">国家一级咨询师</span>
        <span v-if="scope.row.levelId == 2">国家二级咨询师</span>
        <span v-if="scope.row.levelId == 3">国家三级咨询师</span>
        </template>
        </el-table-column>
        <el-table-column prop="isCertified" label="是否认证">
      <template #default="scope">
        <span v-if="scope.row.isCertified == 1">已认证</span>
        <span v-if="scope.row.isCertified == 2">未认证</span>
        </template>
        </el-table-column>
      <el-table-column fixed="right" label="操作" >
        <template #default="scope">
          <el-button link type="primary" size="small" @click="onEdit(scope.row)">修改</el-button>
          <el-button link type="primary" @click="onDel(scope.row.id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 分页 -->
    <el-pagination style="margin-top: 20px; margin-left: 20px;"
    v-model:current-page="queryInfo.pageNum"
    v-model:page-size="queryInfo.pageSize"
    :page-sizes="[2, 3, 4, 5, 6]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    />
  
  <!-- 对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="500"
      :before-close="handleClose"
    >
    <el-form :model="mindTest" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名">
        <el-input v-model="mindTest.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="mindTest.password" />
      </el-form-item>
      <el-form-item label="咨询师姓名">
        <el-input v-model="mindTest.name" />
      </el-form-item>
      <el-form-item label="咨询师电话">
        <el-input v-model="mindTest.tel" />
      </el-form-item>
      <el-form-item label="咨询师性别">
        <el-input v-model="mindTest.gender" />
      </el-form-item>

      <el-form-item label="头像">
  
        <el-input v-model="mindTest.tx" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/file/upload"
          v-model:file-list="fileList"
          :show-file-list="true"
          list-type="picture-card"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
  
      </el-form-item>

      <el-form-item label="所属地址">
        <el-input v-model="mindTest.region" />
        </el-form-item>
      <el-form-item label="个人简介">
        <el-input v-model="mindTest.intro" />
        </el-form-item>
        <el-form-item label="咨询师等级">
        <el-select v-model="mindTest.levelId" placeholder="请选择咨询师等级">
        <el-option label="国家一级心理咨询师" value="1" />
        <el-option label="国家二级心理咨询师" value="2" />
        <el-option label="国家三级心理咨询师" value="3" />

      </el-select>
        </el-form-item>
        <el-form-item label="是否认证">
        <el-radio-group v-model="mindTest.isCertified">
          <el-radio value="1">已认证</el-radio>
          <el-radio value="2">未认证</el-radio>
        </el-radio-group>

        </el-form-item>

    </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addOrUpdate" style="width: 60px;">
            {{title}}
          </el-button>
          <el-button @click="close" style="width: 60px;">取消</el-button>
        </div>
      </template>
    </el-dialog>

  </template>
  
  <script setup>
   import { onMounted, ref} from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { del, get, post, put } from '@/http/http'

  const multipleSelection = ref([]);
  const handleSelectionChange = (val) => {
    multipleSelection.value = [];
    val.forEach(element => {
      multipleSelection.value.push(element.id);
    });
  }
  //批量删除
  const onDeletes = () => {

    if(multipleSelection.value.length == 0){
      ElMessage.warning('请选择要删除的用户'); 

    } else{

      ElMessageBox.confirm(
      '您确定要删除这些用户吗？',
      '系统提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
        .then(() => {
          post('/wt/consultant/deleteByIds/', multipleSelection.value)
            .then(res => {
              console.log(res);
              if (res.code == 1) {
                queryInfo.value.pageNum = 1;
                getList();
                ElMessage({
                  type: 'success',
                  message: 'Delete completed',
                })
              }
            })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
        })

    }

  }

  const url = 'http://localhost:8080/img?imgUrl=images/ZXSWT/';
  const tableData = ref([]);

  onMounted(() => {
     getList(); 
  })

  const queryInfo = ref({
      pageNum: 1,
      pageSize: 3,
      username: '',
      levelId: '',
      region: '',
      name: ''

    //   其他属性
  })

  const total = ref(0);

  const getList = ()=>{
      get('/wt/consultant/getAll', queryInfo.value)
      .then(res=>{
        let result = res;
        // console.log(res);
        if(result.code == 1){
          tableData.value = result.data.list;
          total.value = result.data.total;
        }
      })
  }

  //分页
  const handleSizeChange = (val) => {
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getList();
  }
  const handleCurrentChange = (val) => {
    queryInfo.value.pageNum = val;
    getList();
  }
  const title = ref('');
  const dialogVisible = ref(false);
  const mindTest = ref({
    username: "",
    password:"",
    name:"",
    tel:"",
    gender:"" ,
    levelId: "",
    tx: "",
    region: "",
    intro: "",
    iscertified: '1',
  })

  //确定修改或添加
  const addOrUpdate = ()=>{
      if(title.value == '添加'){
          post('/wt/consultant/add', mindTest.value)
           .then(res => {
            console.log(res);
              getList();
              dialogVisible.value = false;
              ElMessage({
                type:'success',
                message: ' 添加成功！',
              })
            }) 
      }else{
          put('/wt/consultant/update', mindTest.value)
          .then(res => {
            console.log(res);
              getList();
              dialogVisible.value = false;
              ElMessage({
                type:'success',
                message: ' 编辑成功！',
              })
            })
      }  
  }

  const fileList = ref([]);

  //新增
  const onAdd = ()=>{
      dialogVisible.value = true;
      title.value = '添加';
      mindTest.value = {
        username: "",
        password:"",
        name:"",
        tel:"",
        gender:"" ,
        levelId: "",
        tx: "",
        region: "",
        intro: "",
        iscertified: '1',
      }
      fileList.value = [];

  }
  //修改
  const onEdit = (row)=>{
      dialogVisible.value = true;
      title.value = '修改';
      mindTest.value = row;
      fileList.value = [
        {
          url: url + mindTest.value.tx,
          name: mindTest.value.tx,
        }
      ];
  }
  //取消
  const close = ()=>{
      dialogVisible.value = false;
      getList();
      fileList.value = [];
  }

  //上传成功的方法
  const handleAvatarSuccess = (res, file) => {
    console.log(res);
    console.log(file);
    
    mindTest.value.tx = res.data;
  }

  const onDel = (id)=>{
      ElMessageBox.confirm(
      '是否确认注销编号为'+'"'+id+'"'+'的学生信息?',
      '系统提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
        .then(() => {
          del('/wt/consultant/delete/', { params: { id: id } })
            .then(res => {
              console.log(res);
              getList();
              ElMessage({
                type: 'success',
                message: '删除完成！',
              })
            })

        })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
  }

  const onSubmit = ()=>{
          get('/wt/consultant/getAll/', queryInfo.value)
            .then(res => {
              let result = res;
              if(result.code == 1){
                tableData.value = result.data.list;
                total.value = result.data.total;
              }else{
                ElMessage({
                  type:'warning',
                  message: '查询失败！',
                }) 
              }
             
            })
  }
  </script>
  
  <style scoped>
  *{padding: 0; margin: 0;}
  .ml200{margin-left: 200px;}
  
  .container{padding: 20px;}
  nav{color: rgb(80, 80, 80);}
  nav b{padding: 0 10px; font-size: 14px;}
  
  table{border-collapse: collapse;}
  table tr{border-bottom: 1px solid black; text-align: center; border-color: rgb(218, 218, 218)}
  table tr:hover{background-color: rgb(235, 235, 235);}
  table tr th{padding: 15px 0; width: 126px; color: #555E71; font-size: 13px;}
  table tr th:first-child{width: 50px;}
  table tr th:nth-child(9){width: 180px;}
  
  tr td{color: #828487; font-size: 14px; padding: 15px 0;}
  tr td div{display: inline-block; cursor: pointer;}
  tr td span{font-size: 12px; color: #3EA2FF;}
  
  footer{position: relative; height: 32px; margin-top: 20px;}
  .f-container{display: inline-block; position: absolute; right: 0px;}
  
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  </style>